// xhr.readyState:  0 还没调用send 方法
//              1 载入，已经调用send方法
//              2 载入完成，send方法执行完成，已经接受全部相应内容
//              3 交互 正在解析相应内容
//              4 完成 相应内容解析完成，可以在客户端调用

// xhr.status: 2xx 表示成功请求 如 200
//             3xx 需要重定向，浏览器直接跳转，如 301 302 304
//             4xx 客户端请求错误 如 404 403
//             5xx 服务端错误

//get 
const xhr = new XMLHttpRequest()
xhr.open("get","/api",true)// true 异步 false 同步
xhr.onreadystatechange = function () {

  if (xhr.readyState === 4) {
    if (xhr.status == 200) {
      console.log(
        Json.parse(xhr.responseText)
      );
    }else if(xhr.status === 404){
      console.log('404 not found');
    }
  }
}
xhr.send()

//post
const xhr = new XMLHttpRequest()
xhr.open("post","/api",false)// false 异步
xhr.onreadystatechange = function () {

  if (xhr.readyState === 4) {
    if (xhr.status == 200) {
      console.log(
        Json.parse(xhr.responseText)
      );
      alert(xhr.responseText)
    }else{
      alert('其他情况')
    }
  }
}
const postData = {
  name : 'yk',
  password: 'xxx'
}
xhr.send(JSON.stringify(postData))

// 同源：协议 域名 端口 三者一致为同源

// img css js 可以无视同源策略
// 加载图片 css js 可以无视同源策略
// img 可用于统计打点，可食用第三方统计服务
// link script 可使用 CDN CDN一般为外域
// script 可实现 jsonP

// 所有的跨域，都必须经过serve端运行和配合
// 未经serve端允许就实现快于，说明浏览器有漏洞
{/* <script>
  window.abc = function (data) {
    console.log(data);
  }
</script> */}

<script src="http://localhost:8002/jsonp.js?username=xxx"></script>

// script可以实现跨域， serve端可以实现动态拼接数据返回 实现jsonp 
// 服务器可以任意动态凭借数据返回


// 服务端跨域
// cors-服务器设置 http Header
// response.SetHeader("Access-Control-Allow-Origin","http://localhost:9011") // 直接加域名，就不用jsonp了
// response.SetHeader("Access-Control-Allow-Header","X-Requested-With")
// response.SetHeader("Access-Control-Allow-Methods","put,post,get,delete,patch,options")

// 接收跨域的cookie 
// response.SetHeader("Access-Control-Allow-Credentials","true")




// 手写简易ajax

function ajax (url) {
  const p = new Promise(
    (resolve,reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open('GET',url,true)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.readyState === 200) {
            resolve(
              JSON.parse(xhr.responseText)
            )
          }else if (xhr.status ===404) {
            reject(new Error('404 not found'))
          }
        }
      }
      xhr.send(null)
    }
  )
  return p 
}

const url = '/js-exercise/'
ajax(url).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})